<template>
    <Modal :mask-closable="false" v-model="malfunctionVisible" :title="isAdd ? '新增故障' : '编辑故障'">
        <Form class="formList" ref="malForm" :model="formItem" :label-width="100" :rules="validateMalfunction">
            <FormItem label="故障代码：" prop="faultCode">
                <Input type="text" v-model="formItem.faultCode" :placeholder="`${$t('common.inputInfo')}`"
                    class="inputBorder" :maxlength="32"></Input>
            </FormItem>
            <FormItem label="故障性质：" prop="faultName">
                <Input type="text" v-model="formItem.faultName" :placeholder="`${$t('common.inputInfo')}`"
                    class="inputBorder" :maxlength="32"></Input>
            </FormItem>
            <FormItem label="故障描述：" prop="faultDesc">
                <Input type="text" v-model="formItem.faultDesc" :placeholder="`${$t('common.inputInfo')}`"
                    class="inputBorder" :maxlength="32"></Input>
            </FormItem>
        </Form>
        <div slot="footer">
            <Button type="default" @click="handleCancel">{{ $t('common.Cancle') }}</Button>
            <Button type="primary" :loading="loading" @click="handleOk">{{ $t('maintenance.Confirmed') }}</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: "malfunctionModal",
    data() {
        return {
            isAdd: false,
            malfunctionVisible: false,
            loading: false,
            formItem: {
                faultCode: '',
                faultName: '',
                faultDesc: '',
            },
            validateMalfunction: {
                faultCode: [
                    { required: true, message: '请输入故障代码', trigger: 'blur' }
                ],
                faultName: [
                    { required: true, message: '请输入故障性质', trigger: 'blur' }
                ],
                faultDesc: [
                    { required: true, message: '请输入故障描述', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        show(type, record) {
            this.malfunctionVisible = true
            if (type === 'add') {
                this.formItem = {}
                this.isAdd = true
            } else {
                this.isAdd = false
                this.formItem = { ...record }
            }
        },
        handleOk() {
            let { id, faultCode, faultName, faultDesc } = this.formItem
            this.loading = true
            this.$refs.malForm.validate((valid) => {
                if (valid) {
                    if (this.isAdd) {
                        let params = {
                            faultCode,
                            faultName,
                            faultDesc,
                        }
                        this.axios({
                            method: 'post',
                            url: '/workorder/workorderFaultNature/add',
                            data: params
                        }).then(res => {

                            if (res.code === 200) {
                                this.malfunctionVisible = false
                                this.loading = false
                                this.$Message.success('新增成功！')
                                this.$refs.malForm.resetFields();
                                this.$emit('refresh')
                            } else {
                                this.malfunctionVisible = false
                                this.loading = false
                                this.$Message.error(res.msg)
                            }
                        })
                    } else {
                        let params = {
                            id,
                            faultCode,
                            faultName,
                            faultDesc,
                        }
                        this.axios({
                            method: 'put',
                            url: '/workorder/workorderFaultNature/edit',
                            data: params
                        }).then(res => {

                            if (res.code === 200) {
                                this.malfunctionVisible = false
                                this.loading = false
                                this.$Message.success('编辑成功！')
                                this.$refs.malForm.resetFields();
                                this.$emit('refresh')
                            } else {
                                this.malfunctionVisible = false
                                this.loading = false
                                this.$Message.error(res.msg)
                            }
                        })
                    }
                } else {
                    this.loading = false
                }
            })
        },
        handleCancel() {
            this.$refs.malForm.resetFields();
            this.malfunctionVisible = false
        }
    }
}
</script>

<style scoped></style>
